<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml"
      xmlns:v="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>自定义组件..</title>
    <script src="../common/vue.min.js" type="text/javascript"></script>
    <style type="text/css">

    </style>
</head>
<body>
<!--view-->


<div id="div_test">

    <my-comp></my-comp>

    <hr/>
    局部注册组件:

    <c1>
        <!-- todo 这里c2没出来-->
    </c1>

    <hr/>
    一步到位:
    <c3></c3>

    <hr/>
    <b>组合套餐：</b>
    <c4></c4>


</div>


<script type="text/javascript">

    //定义一个组件
    var c2 = Vue.extend({
        template: '<span>子组件容器...</span>'
    })
    //注册一个组件
    Vue.component('c2', c2);


    //    全局组件注册
    var c1 = Vue.extend({
        template: '<div>自定义组件1</div>',
        components: {
            'c2': c2
        }
    })


    var mycomp = Vue.extend({
        template: '<div>mycomp----------</div>'
    })

    Vue.component('c1', c1);
    Vue.component('my-comp', mycomp);

    //将定义和注册集合到一起
    var c3 = Vue.component("c3", {
        template: '<div>自定义组件3</div>'

    })

    //TODO 不理解怎样才能使用到内部的组件
    var c4 = Vue.extend({
        template: "123456",
        components: {
            'cc1': {
                template: '<span>ccc1</span>'
            },
            'cc2': {
                template: '<span>ccc2</span>'
            },
            'cc3': {
                template: '<span>ccc3</span>'
            }
        },
        data: function () {
            return {a: 1}
        }

    });

    Vue.component("c4", c4);

    var vm = new Vue({
        el:"#div_test"
    })


</script>

</body>
</html>